{% extends 'base.html' %}

{% block content %}

<head>
    <meta charset="UTF-8">
    <title>vote N {{option_id}}</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>


<div class="card m-2 w-100 flex-fill" style="width: 18rem;" >
    <div class="card-body bg-d">
        <h5 class="card-title">{{ voting.question }}</h5>
        <h6 class="card-subtitle mb-2 text-muted">{{ voting.author }}</h6>
        <form action="" method="POST">
            <table width="100%"><tr>
                <td>
                {% for option in voting.options %}
                    <div class="form-check">
                    {% if voting.isCheckbox %}
                            <input class="form-check-input" type="checkbox" name="answer"
                                   value="{{ option.id }}">
                    {% else %}
                            <input class="form-check-input" type="radio" name="answer"
                                   value="{{ option.id }}">
                   {% endif %}
                           <label id = "{{option.id}}_text" class="form-check-label" for="exampleRadios1">
                                {{ option.text }}
                           </label>
                           <p style="white-space: nowrap" id="{{option.id}}_votes">Классов: {{ option.vote_count }}</p>
                        </div>

                {% endfor %}
                </td>
                <td width="100%">
                    <!--<div id="chart_div{{voting.id}}" class="bg-d" style="height: 400px;"></div>-->
                    <canvas id="myChart"></canvas>

                </td>
                {% csrf_token %}
            </tr></table>
            <input class="btn btn-primary" type="submit" name="vote_button"
                   value="Голосовать">
            <input type="hidden" value="{{voting.id}}" name="voting_id">
        </form>
    </div>
</div>

<script>
    var mylabels = {{ labels }};
    var mydata = {{ data}};
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'pie',

        // The data for our dataset
        data: {
            labels: mylabels,
            datasets: [{
                label: 'My First dataset',
                backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
     data: mydata
     }]
     },

     // Configuration options go here
     options: {
                {% if theme_flag %}
                    legend: {
                        labels: {
                            fontColor: 'white'
                        }
                    }
                {% endif %}
    }
    });
</script>


</body>
</html>

{% endblock %}